<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>可以发现，图片下方有一些空白，这使得图片和文字底部没有对齐</h1>
  <h2>实际上它们沿着 基线对齐</h2>
  <h3>置换元素 img 没有基线，元素的底端会和父元素基线对齐</h3>
  <h4>解决这一问题，可以采用 font-size: 0 的方案</h4>
  <h4>也可以用 vertical-align: bottom 来应用“img子元素”解决</h4>
  <div>
    <img src="https://source.unsplash.com/random?a=3" alt="">
    <span>pA image from source.unsplash.com</span>
    <span>中文字符</span>
  </div>

</body>
<style>
  img {
    height: 480px;
    height: 270px;
  }

  div {
    width: 800px;
    margin: auto;
    text-align: center;
    background-color: rgb(174, 252, 252);
    /* font-size: 0; */

    /* 也可以设置 line-height: 0 来解决，但它存在副作用，会把文字底部吞噬掉一部分 */
  }

  img {
    /* 默认是 baseline */
    vertical-align: bottom;
  }
</style>
</html>